<template>
  <el-dialog
    v-el-drag-dialog="fullScreen"
    class="pre-dialog"
    title="预览"
    :visible="visible"
    :fullscreen="fullScreen"
    :append-to-body="appendToBody"
    width="900px"
    :show-close="false"
    @update:visible="updateVisible">
    <div slot="title">
      预览
      <span
        @click="fullScreen = !fullScreen"
        class="full-screen-btn">
        <i :class="fullScreen?'el-icon-copy-document':'el-icon-full-screen'" />
      </span>
      <span
        @click="()=>updateVisible(false)"
        class="close-btn">
        <i class="el-icon-close" />
      </span>
    </div>

    <div class="pre-box" v-if="visible"> 
      <div class="pre-box-view">
        <div class="pre-box-view__table"> 
          <el-image :src="preData.cover" class="limitImg"></el-image>
        </div>
      </div>
      <div class="pre-box-info"> 
        <div>
          <p>稿件ID: {{ preData.docId }}</p>
          <p>稿件库: {{ preData.docLib }}</p>
          <p :title="preData.title">标题: {{ preData.title }}</p>
          <p :title="preData.subTitle">副标题: {{ preData.subTitle }}</p>
          <p :title="preData.docAbstract">摘要: {{ preData.docAbstract }}</p>
          <p>作者: {{ preData.author }}</p>
          <p :title="preData.content">内容: {{ preData.content }}</p>
          <p :title="preData.cover">封面摘要: {{ preData.coverAbstract }}</p>
          <p :title="preData.coverTitle">封面标题: {{ preData.coverTitle }}</p>
          <p>栏目: {{ preData.channelName }}</p>
          <p>原链接:  <a :href="preData.originalLink" target="_blank"> 点击查看 </a></p>
          <p :title="preData.shortTitle">短标题: {{ preData.shortTitle }}</p>
          <p :title="preData.shoulderTitle">肩标题: {{ preData.shoulderTitle }}</p>
          <p :title="preData.source">来源: {{ preData.source }}</p>
          <p>发布时间: {{ preData.publishTime }}</p>
          <p>推送时间: {{ preData.pushTime }}</p>
          <!-- <p>X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p> -->
        </div>
        
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' 

export default {
  name: 'preview-dialog',
  directives: {
    elDragDialog
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    preData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: { 
    preData(v) {
        console.log('',v)
    } 
  },
  data() {
    return {
      fullScreen: false,
      width: 300,
      height: 300,
      x: 0,
      y: 0,
      wrapperWidth: 500,
      wrapperHeight: 500,
      qrcode: null,
      isChange: false,
      radio: 1,
      doShowEwm: false
    }
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    }
  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

.pre-dialog {
  ::v-deep .el-dialog__header .el-dialog__headerbtn {
    top: 8px;
  }
  ::v-deep .is-fullscreen.el-dialog {
    display: flex;
    flex-direction: column;
  }
  ::v-deep .is-fullscreen.el-dialog .el-dialog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  ::v-deep .is-fullscreen.el-dialog .el-dialog__body .pre-box {
    flex: 1;
  }
}
.full-screen-btn {
  position: absolute;
  right: 50px;
  top:8px;
  i{ font-size: 14px; color:#666;}
}
.close-btn {
  cursor: pointer;
  position: absolute;
  right: 24px;
  top:9px;
  i{ font-size: 16px; color:#666;}
}
.pre-box {
  display: flex;
  align-items: stretch;

  .padding-0 {
    padding: 0;
    padding-bottom: 10px;
  }

  .showtype-title {
    margin: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__label {
      margin-right: 20px;
    }

    &__value {
      // width: 750px;
      flex: 1;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      border: 1px solid $bg-e9;
    }
  }

  &-view {
    flex: 1;
    padding: 20px;
    .pic-area {
      background: $bg-f4;
      .limitImg {
        position: absolute;
      }
      .limitVideo {
        position: absolute;
      }
      .limitVA {
        width: 100%;
        max-height: 500px;
        object-fit: contain;
      }
    }
  }

  &-info {
    flex-basis: 360px;
    width: 560px;
    border-left: 1px solid $bg-e9;
    padding: 30px;
    position: relative;
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 0;
    }
  }
  
}
.icon-quanping{ font-size: 12px; color:#909399; }
</style>